<template>
  <div class="student">
    <div class="head">
      <div class="head-left">课程汇总</div>
      <div class="head-right">
        <div class="form">
          <el-select
            class="sel"
            v-model="ruleForm.region"
            placeholder="请选择课程"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <el-input
            class="imput"
            placeholder="请填写学员姓名"
            v-model="ruleForm.name"
          ></el-input>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- <el-calendar>
        <template #dateCell="{ data }">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-").slice(1).join("-") }}
            {{ data.isSelected ? "✔️" : "" }}
          </p>
        </template>
      </el-calendar> -->
      <div class="main-header">
        <div class="header-left">
          <div class="leftdata">
            <el-date-picker
              v-model="date"
              type="month"
              value="updateTime"
              placeholder="选择月"
            >
            </el-date-picker>
          </div>
          <div class="lefthour">
            <ul>
              <li>
                <button class="prass">按月</button
                ><button class="prass1">按日</button>
              </li>
              <li>已结课：0</li>
              <li>
                <div class="result"></div>
                未结课:58
              </li>
              <li>总排学生数：12位</li>
              <li>总排课时：58</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="header-right">
        <table class="thead">
          <tr v-for="item in tableData" :key="item.id">
            <td><span>1日</span> (周四)</td>
            <td>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
              <div style="display: inline-block"></div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      ruleForm: {
        name: "",
        region: "",
      },
      updateTime:"",
      tableData: [],
      dayCounts: [],
      courseCounts: [],
      MonthCounts: [],
      date: "",
    };
  },
  created() {
    this.hourlist();
  },
  methods: {
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async hourlist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/coursetables/search"
      );
      this.tableData = res.data.list;
      this.dayCounts = res.data.dayCounts;
      this.courseCounts = res.data.courseCounts;
      this.MonthCounts = res.data.MonthCounts;
      console.log(this.tableData);
      console.log(this.dayCounts);
      console.log(this.courseCounts);
      console.log(this.MonthCounts);
    },
    //获取当前年月日
    addDate() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const day = date.date > 10 ? date.date : "0" + date.date;
      this.updateTime = date.year + "-" + newmonth + "-" + day;
    },
  },
};
</script>

<style scoped>
.student {
  min-width: 950px;
  margin-left: 2%;
  background-color: #fff;
}
.head {
  height: 46px;
  display: flex;
}
.head .head-left {
  width: 90px;
  line-height: 46px;
  text-align: left;
}
.head .head-right {
  width: 100%;
  background-color: #f1f2f6;
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: 20px;
}
.el-button {
  font-size: 12px;
  height: 30px;
}
.form {
  width: 365px;
  height: 30px;
  display: flex;
  align-items: center;
}
.sel,
.imput {
  margin-left: 10px;
  width: 50%;
}
li,
ul {
  list-style: none;
}
table > tr {
  vertical-align: middle;
}
tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}
.main .main-header {
  height: 50px;
  background-color: #fff;
  border-bottom: 0 solid #e5e5e5;
  box-sizing: border-box;
}
.main .main-header .header-left {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.main .main-header .header-left ul li {
  float: right;
  margin-right: 30px;
  position: relative;
  list-style: none;
}
.main .main-header .header-right {
  width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 30px;
}
.main .main-header .header-right tr td {
  border: 1px solid #e5e5e5;
  border-right: 0 solid #e5e5e5;
  border-left: 0 solid #e5e5e5;
  height: 99px;
  position: relative;
  padding-left: 10px;
}
.main .main-header .header-right tr td {
  width: 100px;
  background-color: #f3f3f3;
  font-size: 12px;
  text-align: center;
}
.main .main-header .header-right tr td:first-of-type span {
  font-size: 14px;
}
</style>
